<template>
    <div>
        <el-card class="form-container" shadow="never">
            <el-button @click="queryList">查询</el-button>
        </el-card>
        <el-card class="form-container" shadow="never">
            <el-table :data="listTabData" style="width: 100%">
                <el-table-column prop="id" label="编号" width="180"></el-table-column>
                <el-table-column prop="type" label="类型" :formatter="typeFormat" width="180"></el-table-column>
                <el-table-column prop="name" label="属性名称" width="180"></el-table-column>
                <el-table-column prop="productAttributeCategoryName" label="商品类型" width="180"></el-table-column>
                <el-table-column prop="selectType" label="属性是否可选" :formatter="selectTypeFormat" width="180"></el-table-column>
                <el-table-column prop="inputType" label="属性值的录入方式" :formatter="inputTypeFormat" width="180"></el-table-column>
                <el-table-column prop="inputList" label="可选值列表" width="180"></el-table-column>
                <el-table-column prop="sort" label="排序" width="180"></el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="editAttribute(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="deleteAttribute(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table> 
        </el-card>
    </div>
</template>
<script>
import {queryPmsProductAttribute, pmsDelete} from '@/api/pmsApi'
export default {
    name: 'PmsProductAttributeList',
    data() {
        return {
            listTabData:[]
        }
    },

    mounted() {
        this.doQueryList();
    },
    
    methods: {
        queryList() {
            this.doQueryList();
        },
        
        doQueryList() {
            queryPmsProductAttribute({}).then(response => {
                let data = response.data;
                this.listTabData = data;
            });
        },
        typeFormat(row, column) {
            let type = row.type;
            if (type == 0) {
                return '属性';
            }
            if (type == 1) {
                return '参数';
            }
            return '';
        },
        selectTypeFormat(row, column) {
            const selectType = row.selectType;
            if (selectType == 0) {
                return '唯一';
            }
            if (selectType == 1) {
                return '单选';
            }
            if (selectType == 2) {
                return '多选';
            }
            return '';        
        },

        inputTypeFormat(row, column) {
            const inputType = row.inputType;
            if (inputType == 0) {
                return '手工录入';
            }
            if (inputType == 1) {
                return '从列表中选取';
            }
            return '';
        },

        editAttribute(row) {
            this.$message("该功能暂未开放!");
        },
        
        deleteAttribute(row) {
            const id = row.id;
            const params = {
                id: id,
                type: 2
            };
            pmsDelete(params).then(response => {
                this.$message("删除属性成功!");
                this.doQueryList();
            });
        }
    }
}
</script>

<style>

</style>